<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>远大商学院</title>
	<link href="__PUBLIC__/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="__PUBLIC__/my.css">
    <!-- <link rel="stylesheet" href="__PUBLIC__/Center.css"> -->
</head>
<body>
	<nav class="navbar navbar-default"> <!-- 导航 开始 -->
  	<div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" >
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"  >Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li  class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li  class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" >
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">用户登入</a></li>
        <li><a href="<{:U('Admin/Login/login')}>">去后台!!!</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"  >Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li  class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav> <!-- 导航 END -->



<!-- 轮播图 开始 -->
    <div id="banner">
        <div id="play">
            <div id="imglist">
                <a href="#"><img style="display:block" src="__PUBLIC__/img/1.jpg"></a>
                <a href="#"><img style="display:none" src="__PUBLIC__/img/2.jpg"></a>
                <a href="#"><img style="display:none" src="__PUBLIC__/img/3.jpg"></a>
                <a href="#"><img style="display:none" src="__PUBLIC__/img/4.jpg"></a>
                <a href="#"><img style="display:none" src="__PUBLIC__/img/5.jpg"></a>
            </div>
            <div id="iconlist">
                <ul>
                    <li style="background-color:#f00">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </div>
        </div>
    </div> <!-- 轮播图  END -->















    <script src="__PUBLIC__/js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="__PUBLIC__/js/bootstrap.min.js"></script>
    <!-- holder引用方法<img src="holder.js/250x250"> -->
    <script src="__PUBLIC__/js/holder.min.js"></script>

	<!-- 轮播图 JS -->
    <script>
        //各种获取
        var play = document.getElementById('play');
        var imglist = play.getElementsByTagName('img');
        var iconlist = play.getElementsByTagName('li');

        //设置循环 
        var m = 1;
        function run(){
            if (m > 4) {
                m = 0;
            };
            //当前图片显示, 其他图片隐藏
            img(m);
            //控制按钮 
            icon(m);
            // console.log(m);
            m++;
        }
        //定义定时 
        var timer = setInterval(run,3000);

        //控制图片 
        function img(m){
            for (var i =0; i < imglist.length; i++) {
                imglist[i].style.display = 'none';
            }
            imglist[m].style.display = 'block';
        }

        //控制按钮 
        function icon(m){
            for (var i =0; i < iconlist.length; i++) {
                iconlist[i].style.backgroundColor = '#999';
            }
            iconlist[m].style.backgroundColor = '#f00';
        }

        //鼠标划过 轮播图 定时要停止
        play.onmouseover = function (){
            clearInterval(timer);
        }
        //鼠标划出 定时继续
        play.onmouseout = function (){
            timer = setInterval(run,1000);
        }

        //给所有控制图片的li 绑定鼠标划过事件
        for (var i = 0; i < iconlist.length; i++) {
            (function (i){
                iconlist[i].onmouseover = function (){
                    console.log(i);
                    img(i);
                    icon(i);
                    m = i + 1;
                }
            })(i)
        }
        
    </script>
</body>
</html>